<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="售后订单">
        <a-form :model="formState">
          <a-row>
            <a-col :span="4">
              <a-form-item label="商品名称">
                <a-input
                  style="width: 80%"
                  v-model:value="formState.goodName"
                  placeholder="输入商品名称关键词"
                />
              </a-form-item>
            </a-col>

            <a-col :span="4">
              <a-form-item label="售后编号">
                <a-input
                  style="width: 80%"
                  v-model:value="formState.orderAfterNo"
                  placeholder="输入售后编号"
                />
              </a-form-item>
            </a-col>

            <a-col :span="4">
              <a-form-item label="订单编号">
                <a-input
                  style="width: 80%"
                  v-model:value="formState.orderNo"
                  placeholder="输入商品编号"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="创建时间">
                <a-range-picker
                  v-model:value="dataTime"
                  @change="handleChangeDate"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <div></div>
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-radio-group
          v-model:value="formState.orderState"
          button-style="solid"
          @change="handleChangeTab"
        >
          <a-radio-button :value="null">全部</a-radio-button>
          <a-radio-button
            v-for="item in afterStateEnum.data"
            :value="item.value"
            >{{ item.name }}</a-radio-button
          >
        </a-radio-group>

        <div v-if="dataSource.length > 0" class="table-layout">
          <div
            class="table-card"
            v-for="(item, index) in dataSource"
            :key="index"
          >
            <div class="table-title">
              <text>售后编号：{{ item.orderAfterNo }}</text>
              <text>申请时间：{{ item.createdTime }}</text>
              <text
                >售后方式：{{
                  item.refundType == 1 ? "退货退款" : "仅退款"
                }}</text
              >
            </div>

            <div class="table-item-layout">
              <div class="table-item" style="width: 30%">
                <div class="table-flex">
                  <a-image
                    :src="item.coverPic"
                    :preview="{
                      src: item.coverPic,
                    }"
                    :height="120"
                  />
                  <div style="margin-left: 20px">
                    <div>{{ item.goodsName }}</div>
                    <div>商品编号：{{ item.goodsNo }}</div>
                    <div>价 格：{{ item.totalAmount }}</div>
                  </div>
                </div>
              </div>
              <div class="table-item">
                <div
                  class="text-click"
                  @click="orderInfoFunc(item.mainOrderId)"
                >
                  {{ item.orderNo }}
                </div>
                <a-typography-text type="secondary"
                  >关联商品订单编号</a-typography-text
                >
              </div>
              <div class="table-item">
                <div>¥{{ item.returnAmount }}</div>
                <a-typography-text type="secondary">退款金额</a-typography-text>
              </div>
              <div class="table-item">
                <div>{{ item.reason }}</div>
                <a-typography-text type="secondary">退款原因</a-typography-text>
              </div>

              <div class="table-item">
                <template v-if="item.orderState == 1">
                  <a-typography-text type="danger">{{
                    afterStateEnum.getNameByValue(item.orderState)
                  }}</a-typography-text>
                  <a-typography-text type="danger"
                    >还有28时10分钟自动同意</a-typography-text
                  >
                </template>
                <template  v-if="item.orderState == 10">
                  商家待收货
                </template>
                <template v-else>
                  <a-typography-text>{{
                    afterStateEnum.getNameByValue(item.orderState)
                  }}</a-typography-text>
                  <a-typography-text
                    type="secondary"
                    v-if="item.orderState == 2"
                    >等待客户寄送商品</a-typography-text
                  >
                  <a-typography-text
                    type="secondary"
                    v-else-if="item.orderState == 3"
                    >平台鉴定商品无误后自动退款</a-typography-text
                  >
                  <a-typography-text
                    type="secondary"
                    v-else-if="item.orderState == 4"
                    >物流签收后48小时后自动收货</a-typography-text
                  >
                </template>
              </div>
            </div>

            <div class="table-bottom-layout">
              <a-space wrap class="table-bottom-item">
                <a-button type="primary" @click="seeFunc(item.id)"
                  >查看</a-button
                >
                <template v-if="item.orderState == 1">
                  <a-popconfirm
                  title="是否同意?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleAggree(item.id)"
                >
                <a-button @click="">同意</a-button>
                </a-popconfirm>
                  <a-button type="primary" danger @click="refuseOrderFunc(item.id)"
                    >拒绝</a-button
                  >
                </template>
                <a-button
                  v-if="item.orderState == 3"
                  type="primary"
                  @click="handleEnterResult(item.id)"
                  >录入鉴定结果</a-button
                >
                <a-button
                  v-if="item.orderState == 9 || (item.orderState == 5 && item.identityType == 1)"
                  @click="deliverGoodsFunc(item.id, 2, 2)"
                  >发货给商家</a-button
                >
                <a-popconfirm
                  v-if="item.orderState == 4"
                  title="是否确认收货?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="confirm(item.id)"
                >
                  <a-button type="primary" danger>确认收货</a-button>
                </a-popconfirm>
                <a-button
                  v-if="item.orderState == 5 && item.identityOrderState == 5 && item.identityType == 2"
                  type="primary"
                  :disabled="true"
                  danger
                  >等待用户收货</a-button
                >
                <a-button
                  v-else-if="item.orderState == 5 && item.identityType == 2"
                  type="primary"
                  @click="deliverGoodsFunc(item.id, 2, 1)"
                  danger
                  >退货给用户</a-button
                >
              </a-space>
            </div>
          </div>
        </div>
        <a-empty v-else style="margin-top: 20px" />
        <div
          v-if="dataSource.length > 0"
          style="display: flex; justify-content: flex-end; margin-top: 20px"
        >
          <a-pagination
            v-model:current="pagination.current"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            show-size-changer
            @change="handleChangeSize"
          />
        </div>
      </a-card>
    </a-space>
    <!-- 售后详情 -->
    <afterSaleOrdersInfo ref="afterSaleOrdersInfoRef"></afterSaleOrdersInfo>
    <!-- 订单详情 -->
    <goodsOrderInfo ref="goodsOrderInfoRef"></goodsOrderInfo>
    <!-- 拒绝 -->
    <refuseOrder ref="refuseOrderRef" @refreshList="refreshList"></refuseOrder>
    <!-- 发货 -->
    <deliverGoods
      ref="deliverGoodsRef"
      @refreshList="refreshList"
    ></deliverGoods>
    <appraiseResult ref="appraiseResultRef" @refreshList="refreshList" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import afterStateEnum from "@/enums/afterStateEnum.js";
import afterSaleOrdersInfo from "./afterSaleOrdersModule/afterSaleOrdersInfo.vue";
import deliverGoods from "./goodsOrderModule/deliverGoods.vue";
import goodsOrderInfo from "./goodsOrderModule/goodsOrderInfo.vue";
import refuseOrder from "./afterSaleOrdersModule/refuseOrder.vue";
import appraiseResult from "./goodsOrderModule/appraiseResult.vue";
import { getShopOrderAfterList, confirmAccept,reviewShopOrderAfter } from "@/api/order";
import { message } from "ant-design-vue";
const dataTime = ref(null);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});
const formState = ref({
  goodName: undefined,
  orderAfterNo: undefined,
  orderNo: undefined,
  orderState: undefined,
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  startTime: undefined,
  endTime: undefined,
});

const dataSource = ref([]);

const afterSaleOrdersInfoRef = ref(null);
const seeFunc = (id) => {
  afterSaleOrdersInfoRef.value.seeFunc(id);
};

// 关联订单详情
const goodsOrderInfoRef = ref(null);
const orderInfoFunc = (id) => {
  goodsOrderInfoRef.value.seeFunc(id);
};

// 取消订单
const refuseOrderRef = ref(null);
const refuseOrderFunc = (id) => {
  refuseOrderRef.value.open(id);
};
// 确认收货
const confirm = async (id) => {
  const data = await confirmAccept({ id: id });
  if (data.code == 200) {
    message.info("成功");
    getShopOrderAfterListFn();
  }
};
// 退货给用户
const confirmReturn = async (id, orderType, type) => {
  deliverGoodsRef.value.open(id, orderType, type);
};
function handleChangeDate(date, dateInfo) {
  dataTime.value = date;
  formState.value.startTime = dateInfo[0];
  formState.value.endTime = dateInfo[1];
}
// 同意
const handleAggree = (id) => {
  reviewShopOrderAfter({id,state:1}).then(res => {
    if(res.code === 200){
      message.success('成功')
      getShopOrderAfterListFn()
    }
  })
};
// 发货
const deliverGoodsRef = ref(null);
const deliverGoodsFunc = (id, orderType, type) => {
  deliverGoodsRef.value.open(id, orderType, type);
};
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getShopOrderAfterListFn();
}
function handleReset() {
  formState.value = {
    goodName: undefined,
    orderAfterNo: undefined,
    orderNo: undefined,
    orderState: undefined,
    page: pagination.value.current,
    pageSize: pagination.value.pageSize,
    startTime: undefined,
    endTime: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getShopOrderAfterListFn();
}
function handleChangeTab(val) {
  formState.value.orderState = val.target.value;
  getShopOrderAfterListFn();
}
function handleChangeSize(page, pageSize) {
  pagination.value.current = page;
  pagination.value.pageSize = pageSize;
  formState.value.pageSize = pageSize;
  formState.value.page = page;
  console.log(page, pageSize);
  getShopOrderAfterListFn();
}
const getShopOrderAfterListFn = async () => {
  const params = Object.assign({}, formState.value);
  params.orderState = params.orderState ? [params.orderState] : undefined;
  const data = await getShopOrderAfterList(params);
  if (data.code === 200) {
    dataSource.value = data.data.list;
    pagination.value.total = data.data.total;
  }
};
const appraiseResultRef = ref(null);
function handleEnterResult(id) {
  appraiseResultRef.value.open(id, 2);
}
function refreshList() {
  getShopOrderAfterListFn();
}
onMounted(() => {
  getShopOrderAfterListFn();
});
</script>
<style lang="less" scoped>
.table-layout {
  margin-top: 24px;
  height: 500px;
  overflow-y: scroll;

  .table-card {
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #e8ecf0;
    .table-title {
      padding: 15px 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background: #f3f5f7;
      border-radius: 8px 8px 0 0;
      text {
        margin-right: 42px;
        color: #2b3453;
        font-size: 14px;
        font-weight: 600;
      }
    }

    .table-item-layout {
      display: flex;
      align-items: center;
      padding: 24px 0;
      .table-item:last-child {
        border-right: 0px solid #ffffff;
      }
      .table-item {
        width: 20%;
        height: 95px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 38px;
        box-sizing: border-box;
        border-right: 1px solid #e8ecf0;
        color: #2b3453;
        font-size: 14px;
        .table-flex {
          display: flex;
          align-items: center;
        }
      }
    }

    .table-bottom-layout {
      display: flex;
      justify-content: end;
      padding: 31px 0 24px 0;
      box-sizing: border-box;
      border-top: 1px solid #e8ecf0;
      .table-bottom-left {
        width: 80%;
        display: flex;
        align-items: center;
        .table-bottom-block {
          display: flex;
          align-items: center;
          margin-right: 70px;
        }
      }
      .table-bottom-item {
        padding: 0 24px;
        box-sizing: border-box;
      }
    }
  }
}

.text-click {
  color: #1990ff;
  font-size: 14px;
  cursor: pointer;
}
</style>
